<template>
    <div class="tags-container">
        <el-tag
        size="small"
            v-for="(tag, i) in tags_data"
            :key="tag"
            closable
            @close="del_tag(i)"
            >{{ tag | truncate(50) }}
        </el-tag>
        <el-input
            class="input-new-tag"
            v-if="input_visible"
            v-model.trim="input_value"
            ref="add_tag_input"
            size="mini"
            @keyup.enter.native="add_tag"
            @blur="add_tag"
        >
        </el-input>
        <el-button
            v-else
            class="button-new-tag"
            size="mini"
            @click="show_input"
            >+ 新增元素</el-button
        >
    </div>
</template>

<script>
export default {
    props: {
        tags_data: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            input_visible: false,
            input_value: ""
        }
    },
    methods: {
        del_tag(index) {
            this.$emit("del_tag", index)
        },
        show_input() {
            this.input_visible = true
            this.$nextTick(() => {
                this.$refs.add_tag_input.$refs.input.focus()
            })
        },
        add_tag() {
            const value = this.input_value
            if (value) {
                this.$emit("add_tag", value)
            }
            this.input_value = ""
            this.input_visible = false
        }
    }
}
</script>

<style lang="less">
.button-new-tag {
    margin-left: 10px;
    height: 28px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 130px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>
